<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>人脸对比</title>
</head>
<body>
<video autoplay id="source_vid" style="width:50%;height:auto"></video>
<br>
<a href="/">返回</a>
<p> 从摄像头拍摄两张照片查看相似度或上传两张脸部图片查看相似度 </p>
<p> 计算结果约小，相似度越高，一般阈值为 0.5  </p>
<div>
<button id="capture" onclick="draw();">保存图片1</button>
<button id="capture2" onclick="draw2();">保存图片2</button>
</div>

<div id="show_point" style="color:red"></div>
<br>
<canvas id="output" style="width:320;height:240px"></canvas>
<canvas id="output2" style="width:320;height:240px"></canvas>
<br>
<form method="POST" enctype="multipart/form-data">
    图片1
    <input type="file" name="file1" id="file1">
    图片2
    <input type="file" name="file2" id="file2">
    <input type="submit" value="查看结果">
</form>
<img src="" id="temp" style="display:none;">
<script type="text/javascript" charset="utf-8">

        var video = document.getElementById('source_vid');  // 视频
        var show = document.getElementById('show_point');   // 显示信息

        var p1 = 1; // 记录图片1是否已保存

        var canvas = document.getElementById('output');
        var canvas2 = document.getElementById('output2');
        var context = canvas.getContext('2d');
        var context2 = canvas2.getContext('2d');

        function compare(){
            var imageDate1 = canvas.toDataURL("image/jpeg", 0.5);
            var imageDate2 = canvas2.toDataURL("image/jpeg", 0.5);
            var form = new FormData();
            form.append("file_data1",imageDate1.substr(23));
            form.append("file_data2",imageDate2.substr(23));
            var req = new XMLHttpRequest();
            req.onreadystatechange = function(){
                if(req.readyState==4&&req.status==200){
                    // 请求成功
                    var obj = req.responseText;
                    show.innerText="图片1和图片2的人脸128维特征向量差值 :" + obj
                }
            };
            req.open("post", "compare", true);
            req.send(form);
        }

        function draw(){
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video,0,0, canvas.width, canvas.height);
            p1 = 2;
        }

        function draw2(){
            canvas2.width = video.videoWidth;
            canvas2.height = video.videoHeight;
            if(p1!=2){
                show.innerText="请先保存图片1"
                return;
            }
            show.innerText="正在计算中..."
            context2.drawImage(video,0,0, canvas2.width, canvas2.height);
            compare();
        }

        function success(stream){
            //兼容webkit核心浏览器
            let CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            console.log(stream);

            //video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject = stream;
        }

        function error(error) {
          console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
        }

        var constraints = {video:true, audio:false};

        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }

</script>
</body>
</html>